<template>
	<view>
		<cu-custom bgColor="text-156" :isBack="true">
			<block slot="content">CEMS日常巡检记录表</block>
		</cu-custom>
		<view class="content padding">
			<form class="user-form">
				<view class="card">
					<view class="user-form-item">
						<view class="form-label">企业名称</view>
						<input class="form-input" v-model="form.name" name="name" placeholder="请输入企业名称" />
					</view>
					<view class="user-form-item">
						<view class="form-label">巡查日期</view>
						<picker class="form-input" mode="date" :value="form.date" @change="(e)=> form.date = e.detail.value">
							<view>{{form.date || '请选择巡查日期'}}</view>
						</picker>
					</view>
					<view class="user-form-item">
						<view class="form-label">气态生产商</view>
						<input class="form-input" v-model="form.address" name="address" placeholder="请输入气态污染物CEMS生产商" />
					</view>
					<view class="user-form-item">
						<view class="form-label">气态型号</view>
						<input class="form-input" v-model="form.address" name="address" placeholder="请输入气态污染物CEMS规格型号" />
					</view>
					<view class="user-form-item">
						<view class="form-label">颗粒物生产商</view>
						<input class="form-input" v-model="form.address" name="address" placeholder="请输入颗粒物CEMS生产商" />
					</view>
					<view class="user-form-item">
						<view class="form-label">颗粒物型号</view>
						<input class="form-input" v-model="form.address" name="address" placeholder="请输入颗粒物CEMS规格型号" />
					</view>
					<view class="user-form-item">
						<view class="form-label">维护单位</view>
						<picker class="form-input" @change="(e)=> form.unit = unitList[e.detail.value].name" :value="form.unit" :range="unitList" range-key="name">
							<view>{{form.unit || '请选择维护单位'}}</view>
						</picker>
						
					</view>
					<view class="user-form-item">
						<view class="form-label">安装地点</view>
						<input class="form-input" v-model="form.address" name="address" placeholder="请输入安装地点" />
					</view>
				</view>
				
				<!-- 表格部分 -->
				<view class="card">
					<view class="xh-table">
						<view class="xh-table-header">
							<view class="cell flex-1">项目</view>
							<view class="cell flex-1">内容</view>
							<view class="cell flex-1">维护情况</view>
							<view class="cell" style="flex:0 0 80upx;">备注</view>
						</view>
						<view class="xh-table-body">
							<view 
								v-for="(item,index) in tableList" 
								:key="index" 
								class="xh-table-row"
							>
								<view class="cell flex-1" 
									:class="(index == (tableList.length - 1)) || item.border?'':'no-bottom-border'"	
								>
									{{item.name}}
								</view>
								<view class="cell flex-1">{{item.content}}</view>
								<view class="cell flex-1">
									<picker class="select" @change="(e)=>setTableData(e,index)" :value="form.unit" :range="resultList" range-key="label">
										<view v-if="tableValue[index] !== undefined && resultList[tableValue[index]].label">
											{{(resultList[tableValue[index]].label)}}
											<uni-icons class="icon" type="arrowdown" size="12" color="#333"></uni-icons>
										</view>
										<view v-else class="empty-data">
											维护情况
											<uni-icons class="icon" type="arrowdown" size="12" color="#aaa"></uni-icons>
										</view>
									</picker>
								</view>
								<view class="cell" style="flex:0 0 80upx;">
									<uni-icons type="more" size="12" color="#333" @click="toggle"></uni-icons>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</form>
		</view>
		<!-- 查看备注详情 -->
		<uni-popup ref="popup" type="bottom" :animation="true">
			<view class="popup-content">检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注检查日志备注</view>
		</uni-popup>
	</view>
</template>
<script>
	var  graceChecker = require("../../../../common/graceChecker.js");
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	
	export default {
		components: {
			uniIcons,uniPopup
		},
		data() {
			return {
				tableValue: [],
				resultList:[
					{id:1,label:'优'},
					{id:2,label:'良'},
				],
				tableList:[
					{name: '维护项目',content: '查询日志(1)' },
					{name: '',content: '检查耗材(1)',border: true },
					{name: '',content: '站房卫生(1)' },
					{name: '',content: '站房门窗的密闭性检查(1)' },
					{name: '',content: '供电系统(稳压、UPS等)(1)' },
					{name: '辅助设备检查',content: '室内温湿度(1)' },
					{name: '',content: '空间(1)' },
					{name: '',content: '空气压缩机压力(1)' },
					{name: '',content: '压缩机排水(1)' },
				],
				unitList:[
					{id: 1,name: '单位一'},{id: 1,name: '单位二'},
				],
				form:{
					name: '',date: '',unit: '',
				}
			}
		},
		methods: {
			toggle(){
				this.$refs.popup.open()
			},
			tableChange(e){
				console.log(e.detail)
			},
			setTableData(e,index){
				console.log(e.detail.value,index)
				this.$set(this.tableValue,index,e.detail.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}

</style>
